<template>
  <canvas id="left-canvas"></canvas>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'

const props = defineProps({
  memberCount: {
    type: String,
    required: true,
  },
})

const CanvasStatisticsLeft = () => {
  let canvas = document.querySelector<HTMLCanvasElement>('#left-canvas')
  let ctx = canvas.getContext('2d')
  let devicePixelRatio = window.devicePixelRatio || 1
  let backingStoreRatio =
    ctx['webkitBackingStorePixelRatio'] ||
    ctx['mozBackingStorePixelRatio'] ||
    ctx['msBackingStorePixelRatio'] ||
    ctx['oBackingStorePixelRatio'] ||
    ctx['backingStorePixelRatio'] ||
    1
  let canvasWidth = 288
  let canvasHeight = 213
  canvas.width = canvasWidth
  canvas.height = canvasHeight

  canvas.style.width = canvasWidth / backingStoreRatio + 'px'
  canvas.style.height = canvasHeight / backingStoreRatio + 'px'
  let ratio = devicePixelRatio / backingStoreRatio

  canvas.width = canvas.clientWidth * ratio
  canvas.height = canvas.clientHeight * ratio

  canvas.style.width = canvas.clientWidth + 'px'
  canvas.style.height = canvas.clientHeight + 'px'

  ctx.scale(ratio, ratio)
  // 插入图片
  const img = new Image()
  img.src = 'src/assets/images/canvsimage/1.png'

  const img1 = new Image()
  img1.src = 'src/assets/images/canvsimage/2.png'
  const img2 = new Image()
  img2.src = 'src/assets/images/canvsimage/2.png'

  const img3 = new Image()
  img3.src = 'src/assets/images/canvsimage/3.png'

  const img4 = new Image()
  img4.src = 'src/assets/images/canvsimage/5.png'

  const img5 = new Image()
  img5.src = 'src/assets/images/canvsimage/4.png'

  img.onload = function () {
    // 绘制图片
    ctx.drawImage(img, 5, 0, 60, 41)

    // 绘制文本
    ctx.fillStyle = '#07e2fa'
    ctx.font = 'normal bold 13px Arial,sans-serif'
    ctx.fillText('676887', 70, 15)

    ctx.fillStyle = '#FFFFFF'
    ctx.font = '9px 微软雅黑'

    ctx.fillText(props.memberCount, 75, 30)

    ctx.beginPath()
    ctx.fillStyle = '#1EE9E8'
    ctx.font = '8px 微软雅黑'
    ctx.fillText('万', 125, 35)
  }

  img1.onload = function () {
    // 绘制图片
    ctx.drawImage(img1, 160, 20, 25, 25)

    // 绘制文本
    ctx.fillStyle = '#07e2fa'
    ctx.font = 'normal bold 13px Arial,sans-serif'
    ctx.fillText('456.98', 195, 30)

    ctx.fillStyle = '#FFFFFF'
    ctx.font = '9px 微软雅黑'
    ctx.fillText('购货人数', 195, 45)
    ctx.beginPath()
    ctx.fillStyle = '#1EE9E8'
    ctx.font = '8px 微软雅黑'
    ctx.fillText('个', 235, 50)
  }
  img2.onload = function () {
    // 获取canvas元素
    // 获取canvas的绘图上下文
    // 绘制图片
    ctx.drawImage(img5, 160, 80, 25, 25)
    // ========= 左上

    ctx.fillStyle = '#07e2fa'
    ctx.font = 'normal bold 13px Arial,sans-serif'
    ctx.fillText('456.98', 195, 90)

    ctx.fillStyle = '#FFFFFF'
    ctx.font = '9px 微软雅黑'
    ctx.fillText('会员平均消费', 70, 105)

    ctx.beginPath()
    ctx.fillStyle = '#1EE9E8'
    ctx.font = '8px 微软雅黑'
    ctx.fillText('万', 128, 110)
  }
  img3.onload = function () {
    // 绘制图片
    ctx.drawImage(img3, 30, 140, 25, 25)

    // 绘制文本
    ctx.fillStyle = '#07e2fa'
    ctx.font = 'normal bold 13px Arial,sans-serif'
    ctx.fillText('23', 70, 150)

    ctx.fillStyle = '#FFFFFF'
    ctx.font = '9px 微软雅黑'
    ctx.fillText('新会员人数', 70, 165)

    ctx.beginPath()
    ctx.fillStyle = '#1EE9E8'
    ctx.font = '8px 微软雅黑'
    ctx.fillText('万', 120, 170)
  }

  img4.onload = function () {
    // 绘制图片
    ctx.drawImage(img2, 30, 80, 25, 25)

    // 绘制文本
    ctx.fillStyle = '#07e2fa'
    ctx.font = 'normal bold 13px Arial,sans-serif'
    ctx.fillText('15952', 70, 90)

    ctx.font = '9px 微软雅黑'
    ctx.fillStyle = '#FFFFFF'
    ctx.fillText('有效会员', 195, 105)

    ctx.beginPath()
    ctx.fillStyle = '#1EE9E8'
    ctx.font = '8px 微软雅黑'
    ctx.fillText('美元', 235, 110)
  }

  img5.onload = function () {
    // 绘制图片
    ctx.drawImage(img4, 160, 140, 25, 25)

    // 绘制文本
    ctx.fillStyle = '#07e2fa'
    ctx.font = 'normal bold 13px Arial,sans-serif'
    ctx.fillText('99', 195, 150)

    ctx.font = '9px 微软雅黑'
    ctx.fillStyle = '#FFFFFF'
    ctx.fillText('活跃用户数', 195, 165)

    ctx.beginPath()
    ctx.fillStyle = '#31c7c2'
    ctx.font = '8px 微软雅黑'
    ctx.fillText('万', 245, 170)
  }
}
onMounted(() => {
  setTimeout(() => {
    CanvasStatisticsLeft()
  }, 500)
})
// 导出canvas实例对象
defineExpose({ CanvasStatisticsLeft })
</script>
<style lang="scss" scoped>
#left-canvas {
  width: 100%;
  height: 100%;
}
</style>
